<template>
    <div class="main-wrap">
        <!-- <scroll-view id="scroll-wrap" scroll-y bindtouchstart="start_fn" bindtouchend="end_fn"></scroll-view> -->
        <div class="main-tab" v-if="RoleCode=='User'">
            <div class="tab-item" v-for="(item,key) of tabList" :key=key :class="item.id==defaultIndex?'active':''"
                @click="switchTabFn(item)">
                {{item.name}}
            </div>
        </div>
        <ul class="data-list-wrap">
            <li class="data-list-item" v-for="(item,key) of dataList" :key="key" :class="defaultIndex==1?'studying':''">
                <div class="data-list-item-info">
                    <div class="registration" v-if="defaultIndex==2&&item.TResults=='审核中'"></div>
                    <h3 class="list-item-title">{{item.Name}}</h3>
                    <p class="list-item-desc">机构：{{item.OrgName}}</p>
                    <p class="list-item-desc">时间：{{item.BTime}} 至 {{item.ETime}}</p>
                    <p class="list-item-desc">详细地址：{{item.Address}}</p>
                    <div class="item-button-group">
                        <span class="button-item" v-if="defaultIndex!=3"
                            @click="goTonNextPage('projectDetail',item,1)">查看项目</span>
                        <span class="button-item" v-if="defaultIndex==2&&item.TResults=='未报名'"
                            @click="enlistFn(item)">我要报名</span>
                        <span class="button-item" v-if="defaultIndex==1&&item.isShowBool"
                            @click="goTonNextPage('projectDetail',item,2)">进入项目</span>
                    </div>
                </div>
            </li>
        </ul>
        <p style="text-align: center" v-if="moreText">下拉加载更多</p>
        <p style="text-align: center" v-if="noMoreText">没有更多数据了</p>
        <div class="no-data-wrap" v-if="showNoData">
            <img src="../../../static/tabs/noData.png" alt="">
        </div>
        <van-toast id="van-toast" />
        <van-dialog id="van-dialog" />
    </div>
</template>

<script>
    import { dataEncoder, dataDecoder } from '@/providers/Func'
    import { TrainingList, StudentjoinTraining } from '@/providers/service'
    export default {
        data() {
            return {
                defaultIndex: 1,
                PageSize: 10,
                PageIndex: 0,
                tabList: [
                    { name: '学习中', id: 1 },
                    { name: '需报名', id: 2 },
                    { name: '不通过', id: 3 },
                ],
                dataList: [],
                userInfo: '',
                RoleCode: '',
                showNoData: false,
                moreText:false, //下拉加载更多
                noMoreText:false, // 没有更多数据了
                registrationImg: `${process.env.PUBLICIIMGURL}registration-icon.png`,
            }
        },
        onUnload() {
            this.showNoData = false
        },
        onShow() {
            this.PageIndex = 0;
            this.defaultIndex = 1
            this.dataList = []
            this.moreText = false
            this.noMoreText = false
            this.userInfo = wx.getStorageSync('userInfo')
            let { RoleCode, UserID } = this.userInfo
            this.RoleCode = RoleCode
            this.getData();
        },
        // 上拉加载
        onReachBottom() {
            if(!this.moreText){ return false}
            this.getData();
        },
        onPullDownRefresh() {
            this.PageIndex = 0;
            this.moreText = false
            this.noMoreText = false
            this.dataList = []
            this.getData();
            wx.stopPullDownRefresh()
            this.$toast('刷新成功')
        },
        methods: {
            async getData() {
                let { RoleCode, UserID } = this.userInfo
                try {
                    let res = await TrainingList({
                        RoleCode,
                        UserID,
                        Type: this.RoleCode == 'User' ? this.defaultIndex : 0,
                        PageSize: this.PageSize,
                        PageIndex: this.PageIndex
                    })
                    let _list = res.TrainingList && res.TrainingList.length ? res.TrainingList : []
                    //noData
                    if (!_list.length) {
                        if(this.PageIndex===0){
                            this.showNoData = true
                        }else{
                            this.noMoreText = true
                            this.moreText = false
                        }
                    }else{
                        this.noMoreText = _list.length < 10 ?true:false
                        this.moreText = !this.noMoreText
                        this.PageIndex = this.PageIndex + 1;
                        for (let item of _list) {
                            let mydata = new Date(item.BTime);
                            let newdata = mydata.getTime();
                            let olddata2 = item.BTime.replace(/-/g, '/');
                            let mydata2 = new Date(olddata2);
                            let newdata2 = mydata2.getTime();
                            item.isShowBool = Date.parse(new Date()) >= newdata2
                        }
                            this.dataList = [...this.dataList, ..._list]
                    }
                } catch (error) {
                    console.log(error)
                }
            },
            goTonNextPage(path, item, type) {
                this.$router.push({ path: `/pages/project/${path}`, query: { TID: item.ID, type } })
            },

            switchTabFn(item) {
                this.showNoData = false
                this.defaultIndex = item.id;
                this.moreText = false
                this.noMoreText = false
                this.PageIndex = 0;
                 this.dataList = [];
                this.getData()
            },
            // 我要报名
            enlistFn(item) {
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '请确认是否报名',
                    selector: '#van-dialog'
                }).then(async (result) => {
                    try {
                        let { RoleCode, UserID } = this.userInfo
                        let res = await StudentjoinTraining({ TID: item.ID, UserID })
                        this.$toast('您已报名成功，请等待教务审核!')
                        item.TResults = '审核中'
                        // this.dataList = [...this.dataList]
                        this.showNoData = false
                        this.defaultIndex = 2
                        this.PageIndex = 0;
                        this.getData()
                        // this.$router.push({ path: '/pages/project/projectDetail', query: { id: item.ID, type: 1 } })
                    } catch (error) {
                        console.log(error)
                    }
                }).catch(() => {
                    console.log('取消')
                });
            },
            bindViewTap() {
                const url = '../logs/main'
                if (mpvuePlatform === 'wx') {
                    mpvue.switchTabFn(item)({ url })
                } else {
                    mpvue.navigateTo({ url })
                }
            },
            clickHandle(ev) {

            }
        }
    }
</script>
<style>
    page {
        height: 100%;
        width: 100%;
        background: #ffffff;
    }
</style>
<style scoped lang="less">
    .no-data-wrap {
        text-align: center;
        transform: translateY(30%);
    }

    .main-wrap {
        position: relative;
    }

    .main-tab {
        border-bottom: .05rpx solid #dddddd;
        display: flex;
        padding: 0 20rpx;
        margin-top: 20rpx;

        .tab-item {
            font-size: 30rpx;
            position: relative;
            color: #666666;
            padding: 20rpx 25rpx;
        }

        .active {
            color: #1DA081;
            border-bottom: 1px solid #1DA081;
        }
    }

    .data-list-wrap {
        position: relative;
        padding-top: 25rpx;

        .data-list-item {
            padding: 20rpx 50rpx;
            position: relative;
            background: white;
            margin-bottom: 20rpx;

            &.studying {
                color: #ffffff;

                .data-list-item-info {
                    background: #48b5f2;
                    .list-item-title,
                    .list-item-desc {
                        color: #ffffff;
                    }
                }

            }

            .data-list-item-info {
                height: 325rpx;
                display: flex;
                justify-content: center;
                flex-direction: column;
                background: #f5edfc;
                padding: 0 25rpx 0 40rpx;
                position: relative;

                .registration {
                    height: 42rpx;
                    width: 162rpx;
                    background: url('../../../static/tabs/registration-icon.png') top right no-repeat;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 10rpx;
                    right: -10rpx;
                }

                .list-item-title {
                    font-size: 30rpx;
                    color: #78707d;
                    padding: 5rpx 0;
                }

                .list-item-desc {
                    font-size: 22rpx;
                    color: #78707d;
                    margin-bottom: 3rpx;
                }

                .item-button-group {
                    margin-top: 10rpx;
                    display: flex;
                    font-size: 22rpx;
                    justify-content: flex-end;

                    .button-item {
                        padding: 10rpx 30rpx;
                        background: #f2af54;
                        color: white;
                        border-radius: 4rpx;
                        margin-left: 20rpx;
                    }
                }
            }
        }
    }
</style>
